// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
    initializeLeaderboard();
});

// 初始化排行榜功能
function initializeLeaderboard() {
    initializeTabs();
    initializeFilters();
    initializeAnimations();
}

// 初始化标签切换
function initializeTabs() {
    const tabs = document.querySelectorAll('.tab-button');
    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            // 移除所有标签的激活状态
            tabs.forEach(t => t.classList.remove('active'));
            // 激活当前标签
            tab.classList.add('active');
            // 更新排行榜内容
            updateLeaderboardContent(tab.textContent);
        });
    });
}

// 初始化筛选器
function initializeFilters() {
    const filters = document.querySelectorAll('.filter-select');
    filters.forEach(filter => {
        filter.addEventListener('change', () => {
            // 获取所有筛选器的值
            const timeRange = document.querySelector('select[value="all-time"]').value;
            const gameType = document.querySelector('select[value="all"]').value;
            const sortBy = document.querySelector('select[value="score"]').value;
            // 更新排行榜内容
            updateLeaderboardContent(null, { timeRange, gameType, sortBy });
        });
    });
}

// 初始化动画效果
function initializeAnimations() {
    // 添加滚动动画
    const leaderboardItems = document.querySelectorAll('.game-leaderboard');
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, {
        threshold: 0.1
    });

    leaderboardItems.forEach(item => {
        item.style.opacity = '0';
        item.style.transform = 'translateY(20px)';
        item.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        observer.observe(item);
    });
}

// 更新排行榜内容
function updateLeaderboardContent(category = null, filters = null) {
    // 这里应该发送API请求获取新的排行榜数据
    // 现在使用模拟数据作为示例
    const leaderboardContent = document.querySelector('.leaderboard-content');
    
    // 添加加载动画
    leaderboardContent.innerHTML = '<div class="loading" style="height: 400px;"></div>';
    
    // 模拟API请求延迟
    setTimeout(() => {
        // 在实际应用中，这里应该根据category和filters从服务器获取数据
        // 现在使用静态HTML作为示例
        leaderboardContent.innerHTML = generateLeaderboardHTML();
        initializeAnimations();
    }, 1000);
}

// 生成排行榜HTML
function generateLeaderboardHTML() {
    // 这里应该根据实际数据生成HTML
    // 现在返回示例HTML
    return `
        <div class="game-leaderboard">
            <div class="leaderboard-header">
                <h2 class="game-title">
                    <span class="game-icon">🎮</span>
                    太空冒险
                </h2>
            </div>
            <div class="rankings-list">
                <!-- 排名项目 -->
            </div>
            <a href="#" class="view-more">查看完整排行榜</a>
        </div>
    `;
}

// 处理查看更多点击事件
document.addEventListener('click', (e) => {
    if (e.target.matches('.view-more')) {
        e.preventDefault();
        const gameTitle = e.target.closest('.game-leaderboard')
            .querySelector('.game-title').textContent.trim();
        showFullLeaderboard(gameTitle);
    }
});

// 显示完整排行榜
function showFullLeaderboard(gameTitle) {
    // 这里应该打开一个模态框显示完整排行榜
    // 或者跳转到详细的排行榜页面
    console.log(`显示 ${gameTitle} 的完整排行榜`);
}

// 工具函数：格式化分数
function formatScore(score) {
    return new Intl.NumberFormat('zh-CN').format(score);
}

// 工具函数：格式化日期
function formatDate(dateString) {
    const date = new Date(dateString);
    return new Intl.DateTimeFormat('zh-CN').format(date);
}

// 错误处理函数
function handleError(error) {
    console.error('排行榜加载错误:', error);
    const leaderboardContent = document.querySelector('.leaderboard-content');
    leaderboardContent.innerHTML = `
        <div class="empty-state">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="10"></circle>
                <line x1="12" y1="8" x2="12" y2="12"></line>
                <line x1="12" y1="16" x2="12" y2="16"></line>
            </svg>
            <p class="empty-state-text">加载排行榜时出现错误，请稍后重试。</p>
        </div>
    `;
}
